<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>二维标签加载_基础</title>

    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
    <script type="text/javascript" src="./data/200随机点.js"></script>
  </head>
  <body>
    <div id="player"></div>

    <div class="btn-list">
      <div onclick="add_text()" class="btn">创建文字点位</div>
      <div onclick="add_icon()" class="btn">创建图标点位</div>
      <div onclick="add_marker()" class="btn">创建文字+图标点位</div>
      <div onclick="add_html()" class="btn">直接创建html弹窗</div>
      <div onclick="add_event()" class="btn">marker交互</div>
      <div onclick="add_more()" class="btn">创建大量点</div>
      <div onclick="clearMarker()" class="btn">清除点位</div>
    </div>

    <script type="text/javascript">
      /**
       * 创建文字点位
       */
      const add_text = () => {
        // 定义点位坐标
        const coordinate = [8063.56, 4678.0803125, 3.0140869140625]

        let o1 = {
          id: 'marker_text',
          coordinate: coordinate, //坐标位置
          coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
          anchors: [0, 0], //锚点，设置Marker的整体偏移，取值规则和imageSize设置的宽高有关，图片的左上角会对准标注点的坐标位置。示例设置规则：x=-imageSize.width/2，y=imageSize.height
          range: [0, 5000], //可视范围

          text: '孪创大道', //显示的文字
          useTextAnimation: true, //关闭文字展开动画效果 打开会影响效率
          textRange: [1, 1000], //文本可视范围[近裁距离, 远裁距离]
          textOffset: [0, 0], // 文本偏移
          textBackgroundColor: [1, 1, 1, 0], //文本背景颜色
          fontSize: 22, //字体大小
          fontOutlineSize: 2, //字体轮廓线大小
          fontColor: Color.White, //字体颜色
          fontOutlineColor: Color.Black //字体轮廓线颜色
        }
        // 添加dts marker
        fdapi.marker.add(o1)
        // 定位到 marker
        fdapi.marker.focus('marker_text')
      }

      /**
       * 创建图标点位
       */
      const add_icon = () => {
        // 定义点位坐标
        const coordinate = [8054.56, 4687.913125, 6.715758666992188]
        const imageScale = 0.5
        let o2 = {
          id: 'marker2_icon',
          coordinate: coordinate, //坐标位置
          coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
          anchors: [(-108 * imageScale) / 2, 142 * imageScale], //锚点
          // anchors: [(-108 * imageScale) / 2, 142 * imageScale], //锚点
          range: [0, 100000], //可视范围
          imagePath: '@path:二三维标签添加/img/marker.png', //显示图片路径
          // imagePath: 'http://114.132.48.157/dts/images/marker.png', //显示图片路径
          imageSize: [108 * imageScale, 142 * imageScale],

          text: '孪创大道监控', //显示的文字
          useTextAnimation: true, //关闭文字展开动画效果 打开会影响效率
          textRange: [0, 0], //文本可视范围[近裁距离, 远裁距离]
          textOffset: [0, 0], // 文本偏移
          textBackgroundColor: [118 / 255, 73 / 255, 44 / 255], //文本背景颜色
          fontSize: 18, //字体大小
          fontOutlineSize: 1, //字体轮廓线大小
          fontColor: Color.White, //字体颜色
          fontOutlineColor: Color.Black, //字体轮廓线颜色

          popupURL: '@path:二三维标签添加/html/popup.html', //弹窗HTML链接
          popupSize: [250, 380], //弹窗大小
          popupOffset: [0, 0], //弹窗偏移
          autoHidePopupWindow: true // 是否自动关闭弹出窗口，默认值：true
        }
        // 添加dts marker
        fdapi.marker.add(o2)
        // 定位到 marker
        fdapi.marker.focus('marker2_icon')
      }

      /**
       * 创建文字+图标点位
       */
      const add_marker = () => {
        // 定义点位坐标
        const coordinate = [8018.24, 4701.2096875, 45.794990234375]

        let o2 = {
          id: 'marker_marker',
          coordinate: coordinate, //坐标位置
          coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
          anchors: [-35, 82], //锚点
          // anchors: [-20, 41 * 1.1], //锚点
          range: [0, 10000000], //可视范围
          // imagePath: '@path:二三维标签添加/img/build_bg.png', //显示图片路径
          imagePath: 'http://114.132.48.157/dts/images/build_bg.png', //显示图片路径
          imageSize: [320, 82],

          text: '孪创大楼', //显示的文字
          useTextAnimation: true, //打开文字展开动画效果
          textRange: [0, 100000], //文本可视范围[近裁距离, 远裁距离]
          textBackgroundColor: [0, 0, 0, 0], //文本背景颜色
          fontSize: 15, //字体大小
          textOffset: [-240, 0, 0],
          fontOutlineSize: 1, //字体轮廓线大小
          fontColor: Color.White, //字体颜色
          fontOutlineColor: Color.Black //字体轮廓线颜色
        }
        // 添加dts marker
        fdapi.marker.add(o2)
        // 定位到 marker
        fdapi.marker.focus('marker_marker')
      }

      /**
       * 直接创建html弹窗
       */
      const add_html = () => {
        // 定义点位坐标
        const coordinate = [7978.52, 4744.829375, 21.675634765625002]
        const imageScale = 0.5
        const num = 1400
        let o2 = {
          id: 'marker5',
          coordinate: coordinate, //坐标位置
          coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
          range: [0, 100000], //可视范围
          anchors: [0, 0], //锚点
          popupURL: `@path:二三维标签添加/html/population.html?num1=${num}&.html`, //弹窗HTML链接
          popupSize: [300, 130], //弹窗大小
          popupOffset: [-150, -70], //弹窗偏移
          autoHidePopupWindow: false
        }
        // 添加dts marker
        fdapi.marker.add(o2)
        fdapi.marker.showPopupWindow('marker5')

        // 定位到 marker
        fdapi.marker.focus('marker5')
      }

      /**
       * marker交互
       */
      const add_event = () => {
        // 定义点位坐标
        const coordinate = [8039.56, 4771.005, 35.71572265625]
        const imageScale = 0.5
        let o2 = {
          id: 'marker_交互',
          coordinate: coordinate, //坐标位置
          coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
          anchors: [(-108 * imageScale) / 2, 142 * imageScale], //锚点
          range: [0, 100000], //可视范围
          imagePath: '@path:二三维标签添加/img/marker.png', //显示图片路径
          // imagePath: 'http://114.132.48.157/dts/images/marker.png', //显示图片路径
          imageSize: [108 * imageScale, 142 * imageScale],

          text: '楼顶监控', //显示的文字
          useTextAnimation: true, //关闭文字展开动画效果 打开会影响效率
          textRange: [0, 0], //文本可视范围[近裁距离, 远裁距离]
          textOffset: [0, 0], // 文本偏移
          textBackgroundColor: [118 / 255, 73 / 255, 44 / 255], //文本背景颜色
          fontSize: 18, //字体大小
          fontOutlineSize: 1, //字体轮廓线大小
          fontColor: Color.White, //字体颜色
          fontOutlineColor: Color.Black, //字体轮廓线颜色

          popupURL: '@path:二三维标签添加/html/交互弹窗.html', //弹窗HTML链接
          popupSize: [400, 520], //弹窗大小
          popupOffset: [0, 0], //弹窗偏移
          autoHidePopupWindow: true // 是否自动关闭弹出窗口，默认值：true
        }
        // 添加dts marker
        fdapi.marker.add(o2)
        // 定位到 marker
        fdapi.marker.focus('marker6')
      }

      /**
       * 创建大量点
       */
      const add_more = () => {
        const bbox = [7717.92, 4540.8575, 2.9991015625, 8233.4, 5078.333125, 3.12015625]
        const getRandNumBetween = (min, max) => {
          return Math.round((Math.random() * (max - min) + min) * 10) / 10
        }

        // 定义marker数组
        const markerList = []

        for (let i = 0; i <= 200; i++) {
          let x = getRandNumBetween(bbox[0], bbox[3]) //minX ~ maxX
          let y = getRandNumBetween(bbox[1], bbox[4]) //minY ~ maxY

          // 定义点位坐标
          const coordinate = [x, y]

          const o = {
            id: 'marker_' + i,
            coordinate: coordinate, //坐标位置
            coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
            anchors: [-108 / 4, 142 / 2], //锚点
            range: [0, 50000], //可视范围
            imagePath: '@path:二三维标签添加/img/marker.png', //显示图片路径
            // imagePath: 'http://114.132.48.157/dts/images/marker.png', //显示图片路径
            imageSize: [108 / 2, 142 / 2],

            autoHeight: true, // 自动判断下方是否有物体
            displayMode: 4, // 智能显示模式  开发过程中请根据业务需求判断使用四种显示模式

            clusterByImage: true, // 聚合时是否根据图片路径分类，即当多个marker的imagePath路径参数相同时按路径对marker分类聚合
            occlusionCull: false // 是否参与遮挡剔除
          }
          // 往数组中添加 marker 对象
          markerList.push(o)
        }

        // 添加dts marker
        fdapi.marker.add(markerList)

        fdapi.camera.set(8353.092805, 4459.31082, 495.031523, -45.886406, -140.454117, 2)
      }

      const clearMarker = () => {
        fdapi.marker.clear()
      }
      /**
       * 初始化场景
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          apiOptions: {
            onReady: function () {
              fdapi.reset(2 | 4)
            },
            onEvent: function (event) {
              const eventType = event.eventtype
              console.log('onEvent', event)
              switch (eventType) {
                case 'LeftMouseButtonClick':
                  console.log('触发事件类型：鼠标左键单击，eventType：' + eventType)
                  if (event.Type === 'marker') {
                    if (event.Id === 'marker_交互') {
                      alert('点击了marker点')
                    }
                  }
                  break

                case 'MarkerCallBack':
                  alert(event.Data)
                  break

                default:
                  break
              }
            }
          }
        })
      }

      /**
       * 自适应分辨率
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      // 页面加载调用
      window.addEventListener('load', OnLoad, true)

      // 页面窗口变换调用
      window.addEventListener('resize', onResize, true)
    </script>
  </body>
</html>
